import React, { memo } from 'react'
import { RouteChildren } from '../../router/router'
import { TabBar } from 'antd-mobile'
import { useLocation, useNavigate } from 'react-router-dom'
const Index = memo (() => {
    const navgivte = useNavigate()
    const { pathname } = useLocation()
    return (
        <div>
            <div className="tabr" style={{
                position: 'fixed',
                bottom: 0,
                left: 0,
                width: '100%',
                height: '50px',
                backgroundColor: '#fff',
            }
            }>
                <TabBar activeKey={pathname} onChange={(val: string) => navgivte(val as string)}>
                    {
                        RouteChildren.map((item) => {
                            return <TabBar.Item key={item.path} icon={item.meta.icon} title={item.meta.table} >
                                {item.meta.table}
                            </TabBar.Item>
                        })
                    }
                </TabBar>
            </div>
        </div>
    )
})

export default Index
